<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="StorageuserDetailForm" label-witth="120px" class="form-container" >
      <div class="createPost-main-container">
            <el-form-item style="margin-bottom: 20px;" >
              <span style="width:120px;">UID :</span>
              <span style="width:200px;">{{StorageuserDetailForm.uid}}</span>
            </el-form-item>

            <el-form-item style="margin-bottom: 20px;" >
              <span style="width:120px;">仓库名 :</span>
              <span style="width:200px;">{{StorageuserDetailForm.storageName}}</span>
            </el-form-item>

            <el-form-item style="margin-bottom: 20px;" >
              <span style="width:120px;">角色 : </span>
              <span style="width:200px;">{{StorageuserDetailForm.position | getPositionName}}</span>
            </el-form-item>

      </div>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/singleImage3'
import MDinput from '@/components/MDinput'
import Sticky from '@/components/Sticky' // 粘性header组件
import { validateURL } from '@/utils/validate'
import { fetchStorage } from '@/api/storageuser'
import { userSearch } from '@/api/remoteSearch'
import Warning from './Warning'
import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from '@/components/Dropdown'

const defaultForm = {
  uid : '',//用户号,userId
  sid : '', //一级仓库号,storageId
  rid : '', //二级仓库号,roomId
  status : '',
  userName : '', //用户名
  storageName : '', //自定义仓库名
  position : '', //用户类型,1管理员,2技术员,3租户
  positionName :'' ,
  display_time: undefined, //
  writeValue1 : '',
  writeValue2 : '',
  writeValue3 : '',
  writeValue4 : '',
  writeValue5 : '',
  writeValue6 : '',
  readValue1: '',
  readValue2: '',
  readValue3: '',
  readValue4: '',
  readValue5: '',
  readValue6: '',
  haveChild: false

}

export default {
  name: 'StorageuserDetail',
  components: { Tinymce, MDinput, Upload, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    getPositionName(position) {
      if (position === 1) {
        return '管理员';
      }else if (position === 2) {
        return '技术员';
      }else if (position === 3) {
        return '租户'
      }
    }
  },
  data() {
    return {
      StorageuserDetailForm: Object.assign({}, defaultForm),
      loading: false,
      userListOptions: [],
      rules: {
      }
    }
  },
  computed: {

  },
  created() {
    this.StorageuserDetailForm = Object.assign({}, defaultForm)
    const id = this.$route.query && this.$route.query.id
    this.fetchData( id )
  },
  methods: {
    fetchData(id) {
      const data = JSON.stringify({uid: id, rid: 1, sid:1})
      fetchStorage(data).then(response => {
        this.StorageuserDetailForm = response.data.data
        if(this.StorageuserDetailForm.position === 1){
          this.StorageuserDetailForm.positionName = '管理员'
        }else if(this.StorageuserDetailForm.position === 2){
          this.StorageuserDetailForm.positionName = '技术员'
        }else if(this.StorageuserDetailForm.position === 3){
          this.StorageuserDetailForm.positionName = '租户'
        }
        console.log(this.StorageuserDetailForm)
      }).catch(err => {
        console.log(err)
      })
    },
    submitForm() {
      // this.postForm.display_time = parseInt(this.display_time / 1000)
      // console.log(this.postForm)
      // this.$refs.postForm.validate(valid => {
      //   if (valid) {
      //     this.loading = true
      //     this.$notify({
      //       title: '成功',
      //       message: '发布文章成功',
      //       type: 'success',
      //       duration: 2000
      //     })
      //     this.postForm.status = 'published'
      //     this.loading = false
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    draftForm() {
      // if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
      //   this.$message({
      //     message: '请填写必要的标题和内容',
      //     type: 'warning'
      //   })
      //   return
      // }
      // this.$message({
      //   message: '保存成功',
      //   type: 'success',
      //   showClose: true,
      //   duration: 1000
      // })
      // this.postForm.status = 'draft'
    },
    getRemoteUserList(query) {
      userSearch(query).then(response => {
        if (!response.data.items) return
        this.userListOptions = response.data.items.map(v => v.name)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.createPost-container {
  position: relative;
  .createPost-main-container {
    padding: 40px 45px 20px 50px;
    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;
      .postInfo-container-item {
        float: left;
      }
    }
    .editor-container {
      min-height: 500px;
      margin: 0 0 30px;
      .editor-upload-btn-container {
        text-align: right;
        margin-right: 10px;
        .editor-upload-btn {
          display: inline-block;
        }
      }
    }
  }
  .word-counter {
    width: 40px;
    position: absolute;
    right: -10px;
    top: 0px;
  }
}
</style>
